<template>
  <div class="w-full h-full flex justify-between items-center">
    <div class="h-full w-32 juzhong bg-white">
      <touxiang class="w-20 h-full"></touxiang>
      <div class="h-full w-12 flex-1 flex-col flex justify-evenly items-start">
        <span class="text-xs">姓名姓名</span>
        <span class="text-xs">职位</span>
        <span @click="zhuxiao()"
              class="text-xs text-red-500 hover:text-blue-500 active:text-blue-500 cursor-pointer">注销</span>
      </div>
    </div>
    <div class="flex-1 flex justify-evenly items-center">
      <div v-for="(item,index) in menulist" :key="item.name"
           @click="dianji(index)"
           :class="[activeIndex===index?'border border-white bg-white bg-opacity-40':'']"
           class="w-16 h-16 juzhong cursor-pointer select-none hover:bg-white hover:bg-opacity-40">
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="h-full w-40 juzhong flex-col">
      <span>{{ nowtimestr[0] }}</span>
      <span>{{ nowtimestr[1] }}</span>
      <span v-if="tianqiresult==={}">天气获取失败，点击重试</span>
      <n-popover placement="bottom" trigger="hover" v-else>
        <template v-slot:trigger>
          <span
              class="cursor-pointer hover:text-red-500 text-blue-500">{{ tianqiresult.city }} - {{ tianqiresult.wea }}</span>
        </template>
        <div class="w-40">
          <div class="w-full text-center cursor-pointer text-blue-500 hover:text-red-500">切换7天日期</div>
          <div class="juzhong flex-col">
            <div><span>城市：</span><span class="text-blue-500">{{ tianqiresult.city }}</span></div>
            <div><span>天气：</span><span class="text-blue-500">{{ tianqiresult.wea }}</span></div>
            <div><span>平均温度：</span><span class="text-blue-500">{{ tianqiresult.tem }}</span></div>
            <div><span>白天温度：</span><span class="text-blue-500">{{ tianqiresult.tem_day }}</span></div>
            <div><span>夜间温度：</span><span class="text-blue-500">{{ tianqiresult.tem_night }}</span></div>
            <div><span>风向：</span><span class="text-blue-500">{{ tianqiresult.win }}</span></div>
            <div><span>风力：</span><span class="text-blue-500">{{ tianqiresult.win_speed }}</span></div>
            <div><span>风速：</span><span class="text-blue-500">{{ tianqiresult.win_meter }}</span></div>
            <div><span>空气质量：</span><span class="text-blue-500">{{ tianqiresult.air }}</span></div>
            <div><span>更新时间：</span><span class="text-blue-500">{{ tianqiresult.update_time }}</span></div>
          </div>
        </div>
      </n-popover>
    </div>
  </div>
</template>

<script setup>
import {NPopover} from "naive-ui"
import {ref, computed} from "vue"
import {useStore} from "vuex"
import {useRoute, useRouter} from "vue-router"
import http from "@/request/request.js"

const store = useStore()
const route = useRoute()
const router = useRouter()

// 点击注销
const zhuxiao = () => {
  console.log("点击注销按钮")
  router.replace({name: "Login"})
}
const shijian = ref(0)
const xunhuan = ref(null)
const add0 = (m) => {
  return m < 10 ? '0' + m : m
}
const nowtimestr = computed(() => {
  const time = new Date(shijian.value);
  const y = time.getFullYear();
  const m = time.getMonth() + 1;
  const d = time.getDate();
  const h = time.getHours();
  const mm = time.getMinutes();
  const s = time.getSeconds();
  let xingqi
  switch (time.getDay()) {
    case 0:
      xingqi = "周日"
      break
    case 1:
      xingqi = "周一"
      break
    case 2:
      xingqi = "周二"
      break
    case 3:
      xingqi = "周三"
      break
    case 4:
      xingqi = "周四"
      break
    case 5:
      xingqi = "周五"
      break
    case 6:
      xingqi = "周六"
      break
  }
  return [y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s), xingqi];
})
// 获取服务器当前时间
const getnowserverTime = () => {
  clearTimeout(xunhuan.value)
  shijian.value = new Date().getTime();
  timeloop()
  setTimeout(() => {
    getnowserverTime()
  }, 1000)
}
// 时间循环
const timeloop = () => {
  shijian.value -= 1000
  xunhuan.value = setTimeout(() => {
    timeloop()
  }, 100000)
}
// 获取天气
const tianqiresult = ref({})
const gettianqi = () => {
  http.tianqi().then(res => {
    tianqiresult.value = res.data
  })
  setTimeout(() => {
    gettianqi()
  }, 100000)
}

// 从vuex里面获取菜单列表
const menulist = computed(() => store.state.navrouter.caidan)
const activeIndex = computed(() => store.state.navrouter.activeindex1)
// 点击顶部菜单
const dianji = (index) => {
  store.commit("navrouter/changeactiveIndex1", index)
}
// 初始化区域
getnowserverTime()
gettianqi()
</script>

<style scoped>

</style>
